<template>
    <doc-main>
        <collapse-panel class="panel-default" title="Collapse Panel">
            <input-label label="Class" type="number" label-class="label label-danger"/>
            <select-time label="Time" v-model="time"/>
            <div class="clearfix">
                <round-progress :max="100" id="round-p" value="20" :options="options">
                    <p>2333</p>
                    <p>66666</p>
                </round-progress>
            </div>
            <div>
                <re-progress :animate="true" :percentage="10"/>
            </div>
            <div id='example-3'>
                <input type="checkbox" id="jack" value="1" v-model="checkedNames">
                <label for="jack">Jack</label>
                <input type="checkbox" id="john" value="2" v-model="checkedNames">
                <label for="john">John</label>
                <input type="checkbox" id="mike" value="3" v-model="checkedNames">
                <label for="mike">Mike</label>
                <br>
                <span>Checked names: {{ checkedNames }}</span>
            </div>
            <div>
                <pagination :current-page="current_page" :total-page="total_page" :to-pagination="page"/>
                <button class="btn btn-success btn-block" @click="switchPage">Button</button>
            </div>
            <div>
                <input-in-line type="text" label="Label"/>
            </div>
            <div>
                <input-text-area v-model="text"/>
                {{text}}
            </div>
            <div>
                <input-switch v-model="sw"/>
                <p>{{sw}}</p>
            </div>
        </collapse-panel>
    </doc-main>
</template>

<script>
    import DocMain from '../layout/DocMain.vue';
    import InputLabel from '../../../js/components/input/InputLabel';
    import CollapsePanel from '../../../js/components/panel/CollapsePanel';
    import SelectTime from '../../../js/components/widget/SelectTime';
    import RoundProgress from '../../../js/components/widget/RoundProgress';
    import ReProgress from '../../../js/components/widget/ReProgress';
    import Pagination from '../../../js/components/widget/Pagination';
    import InputInLine from '../../../js/components/input/InputInLine';
    import InputTextArea from '../../../js/components/input/InputTextArea';
    import InputSwitch from '../../../js/components/input/InputSwitch';

    export default {
        components: {
            InputSwitch,
            InputTextArea,
            InputInLine,
            Pagination,
            ReProgress,
            RoundProgress,
            SelectTime,
            CollapsePanel,
            InputLabel,
            DocMain
        },
        data () {
            return {
                time: '',
                options: {},
                checkedNames: [1, 3],
                current_page: 1,
                total_page: 7,
                text: '',
                sw: false
            };
        },
        methods: {
            switchPage () {
                this.total_page--;
            },
            page (page) {
                this.current_page = page;
            }
        },
        watch: {
            time (newVal) {
                console.info(newVal);
            }
        }
    };
</script>

<style>

</style>
